<template>
  <Echart :height="height" width="100%" :options="options" @handleClick="handleClick" />
</template>

<script>
import Echart from '@/components/Echart/index'
import resize from '@/utils/resize'
import { mapState } from 'vuex'
export default {
  components: { Echart },
  mixins: [resize],
  props: {
    cdata: {
      type: Object,
      default() {
        return {}
      },
    },
    height: {
      type: String,
      default() {
        return '100%'
      },
    },
  },
  data() {
    return {
      chart: null,
      options: {
        title: {
          show: false,
          text: '标题',
          left: 'center',
          bottom: '32%',
        },
        color: ['#4B6EEF', '#DFDFDF'],
        tooltip: {
          trigger: 'item',
        },
        legend: {
          show: true,
          bottom: '0%',
          left: 'center',
          orient: 'horizontal',
          icon: 'circle',
          itemWidth: 10,
        },
        series: [
          {
            name: '磁盘利用率',
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['40%', '55%'],
            startAngle: 90, //起始角度
            label: {
              show: true,
              formatter: '{b}:{d}%',
              color: 'rgba(0,0,0,.65)',
            },
            labelLine: {
              show: true,
            },
            hoverAnimation: false,
            data: [
              {
                value: 0,
                name: '利用率',
                itemStyle: {
                  normal: {
                    color: '#4B6EEF',
                  },
                },
              },
              {
                name: '空置率',
                itemStyle: {
                  emphasis: {
                    color: '#e6e9f0',
                  },
                  normal: {
                    color: '#e6e9f0',
                  },
                },
                value: 0, // 总数减去当前项数(灰色占比)
              },
            ],
          },
        ],
      },
    }
  },
  watch: {
    cdata: {
      handler(newValue) {
        this.options.title.text = newValue.title
        this.options.legend.show = newValue.legendShow
        this.options.color = newValue.color
        this.options.series[0].data[0].value = newValue.usage
        this.options.series[0].data[1].value = newValue.idle
      },
      immediate: true,
      deep: true,
    },
    sideTheme:{
      handler(newValue) {
        if(newValue=='theme-dark'){
          this.options.series[0].label.color='#fff'
        }else{
          this.options.series[0].label.color='rgba(0,0,0,.65)'
        }
      },
      immediate:true,
      deep:true
    }
  },
  computed:{
...mapState({
  sideTheme: state => state.settings.sideTheme,
})
  },
  methods: {
    handleClick(data) {
      this.$emit('handleClick', data)
    },
  },
}
</script>
